<script>
import { getMusicList } from '@/api/homeApi'
import { reactive, onMounted, toRefs } from 'vue'

/* 用vue2语法获取数据 */
/* export default {
  data () {
    return {
      musicList: []
    }
  },
  methods: {
    // 获取发现歌单
    async getGnedan () {
      const res = await getMusicList()
      console.log(res)
      this.musicList = res.data.result
    },
    // 对播放量进行处理
    changeCount: function (num) {
      if (num >= 100000000) {
        // toFixed(1)显示一位小数
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
    }
  },
  mounted () {
    this.getGnedan()
  }
} */

/* vue3.0版本写法 */
export default {
  setup () {
    const state = reactive({
      musicList: []
    })
    onMounted(async () => {
      const res = await getMusicList()
      // console.log(res)
      state.musicList = res.data.result
    })
    // 对播放量进行处理
    const changeCount = function (num) {
      if (num >= 100000000) {
        // toFixed(1)显示一位小数
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
    }
    return {
      ...toRefs(state),
      changeCount
    }
  }
}
</script>

<template>
  <div class="musicList">
    <div class="musicTop">
      <div class="title">推荐歌单
      </div>
      <div class="more">更多 ></div>
    </div>
    <div class="musicContent">
      <van-swipe :loop="false" :width="120" :show-indicators="false" class="my-swiper">
        <van-swipe-item v-for="item in musicList" :key="item.id">
          <router-link :to="{ path: '/itemMusic', query: { id: item.id } }">
            <img :src="item.picUrl">
            <span class="playCount">
             <svg t="1655285863705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14603" width="200" height="200"><path d="M899.117 526.883a30.04 30.04 0 0 1-3.976 5.365 29.922 29.922 0 0 1-1.548 1.58l-0.2 0.186a30.087 30.087 0 0 1-5.472 4.057L165.858 955.094c-0.047 0.027-0.1 0.046-0.143 0.073q-1.155 0.659-2.37 1.214c-0.145 0.066-0.289 0.132-0.434 0.2q-1.084 0.476-2.212 0.864c-0.238 0.083-0.475 0.165-0.713 0.241-0.645 0.205-1.3 0.386-1.963 0.548-0.348 0.085-0.7 0.168-1.044 0.24-0.56 0.116-1.126 0.213-1.7 0.3q-1.416 0.21-2.833 0.283h-0.016a29.977 29.977 0 0 1-4.5-0.107c-0.243-0.024-0.483-0.057-0.723-0.086a30.513 30.513 0 0 1-2.109-0.331 31.377 31.377 0 0 1-1.021-0.222c-0.6-0.139-1.191-0.293-1.78-0.469-0.331-0.1-0.658-0.2-0.984-0.315q-0.921-0.309-1.82-0.676c-0.241-0.1-0.479-0.2-0.716-0.307q-1.047-0.461-2.055-1c-0.108-0.058-0.215-0.118-0.322-0.177a29.753 29.753 0 0 1-8.652-7.174l-0.071-0.089a29.873 29.873 0 0 1-1.59-2.124c-0.3-0.439-0.589-0.885-0.866-1.34-0.108-0.179-0.233-0.341-0.338-0.524a29.859 29.859 0 0 1-4-16V95.886a30 30 0 0 1 44.981-26.984l722.265 417a30 30 0 0 1 10.988 40.981zM180.89 877.13l632.327-365.2L180.89 146.856V877.13z" fill="#ffffff" p-id="14604"></path></svg>
              {{ changeCount(item.playCount) }}
            </span>
            <span class="name">{{ item.name }}</span>
          </router-link>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<style lang='less' scoped>
.musicList {
  margin-top: 10px;
  width: 100%;
  height: 5rem;
  padding: 0.2rem;

  .musicTop {
    width: 100%;
    height: .6rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: .2rem;

    .title {
      font-size: 0.36rem;
      font-weight: 548;
    }

    .more {
      color:gray;
      border: 1px solid #ccc;
      text-align: center;
      padding: 0.1rem 0.2rem;
      border-radius: 0.4rem;
      font-size: 0.05rem;
    }
  }

  .musicContent {
    margin-top: 0.4rem;
    width: 100%;
    height: 5rem;

    .my-swiper {
      height: 100%;

      .van-swipe-item {
        margin-right: 0.3rem;
        position: relative;

        img {
          width: 100%;
          border-radius: 0.3rem;
        }

        .playCount {
          position: absolute;
          top: .2rem;
          right: 0.1rem;
          padding: .05rem 0.05rem 0.06rem;
          font-size: .24rem;
          background-color: rgba(0,0,0,0.2);
          height: .4rem;
          border-radius: .24rem;
          text-align: center;
          color: white;
          /* 文本超出显示省略号 */
          text-overflow: ellipsis;

          svg {
            width: .24rem;
            height: 80%;
            color: white;

          }
        }

        .name{
          font-size:0.02rem!important;
        }
      }
    }
  }
}
</style>
